<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div
    v-if="goodsConfig.dataList.length"
    class="Mall4j limited-skill-container"
  >
    <floor-title-component :config="titleConfig" />
    <div class="limited-skill-pages">
      <goods-list-component
        :config="goodsConfig"
        :type="'discount'"
      />
    </div>
  </div>
</template>
<script setup>
import floorTitleComponent from '../goods-component/floor-title-component/index.vue'
import goodsListComponent from '../goods-component/goods-list-component/index.vue'
const props = defineProps({
  itemComponent: { // 当前组件的信息
    type: Object,
    default: () => {}
  }
})

const titleConfig = ref({ // 标题配置信息
  mainContent: {
    title: '优惠团购',
    fontSize: '16px',
    color: '#333'
  },
  background: '',
  marginTop: '0px',
  marginBottom: '0px',
  showMore: 0,
  path: {
    link: '',
    name: '',
    type: ''
  },
  moreTextColor: '#999',
  showSubTitle: 0,
  subContent: {
    title: '副标题',
    fontSize: '12px',
    color: '#999'
  }
})

// 商品配置信息
const goodsConfig = ref({
  showMany: 4,
  showName: 0,
  showDescription: 0,
  showPrice: 0,
  listTypeList: new Array(4),
  dataList: []
})

watch(() => props.itemComponent, (newVal) => {
  if (JSON.stringify(newVal.rightConfigMessage) !== '{}') {
    // 标题
    titleConfig.value = {
      mainContent: {
        title: '优惠团购',
        fontSize: newVal.rightConfigMessage.mainFontSize + 'px',
        color: newVal.rightConfigMessage.mainTextColor
      },
      background: newVal.rightConfigMessage.bgColor,
      marginTop: newVal.rightConfigMessage.marginTop + 'px',
      marginBottom: newVal.rightConfigMessage.marginBottom + 'px',
      showMore: 0, // 是否展示查看更多
      path: {
        link: '/group-buy',
        name: '',
        type: '4'
      }, // 查看更多的链接
      moreTextColor: '#999', // 查看更多的文字颜色
      showSubTitle: newVal.rightConfigMessage.showSubTitle, // 是否展示副标题
      subContent: {
        title: newVal.rightConfigMessage.subTitle, // 副标题的内容
        fontSize: newVal.rightConfigMessage.subFontSize + 'px', // 副标题的大小
        color: newVal.rightConfigMessage.subTextColor // 副标题的文字颜色
      }
    }
    // 商品列表
    goodsConfig.value = {
      showMany: 4,
      showName: newVal.rightConfigMessage.showContent.find(item => Number(item) === 0) ? 0 : 1,
      showDescription: newVal.rightConfigMessage.showContent.find(item => Number(item) === 1) ? 0 : 1,
      showPrice: newVal.rightConfigMessage.showContent.find(item => Number(item) === 2) ? 0 : 1,
      listTypeList: new Array(4),
      dataList: newVal.rightConfigMessage.goodsList
    }
  }
}, {
  immediate: true,
  deep: true
})

</script>
<style scoped>
.limited-skill-container {
    width: 100%;
}
.limited-skill-pages {
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
}
</style>
